<template>
	<view class="rf-tabs-wrap">
		<view class="rf-tabs">
			<view class="rf-tab" :class="{active: index == i}" v-for="(v, i) in values" :key="i" @click="selTab(i)">
				{{v}}
			</view>
		</view>
		<view class="tab-select-bar">
			<view :animation="animationData" class="bar-line" :style="{width: itemWidth + 'px'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			values: {
				type: Array,
				default() {
					return []
				}
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				itemWidth: 0,
				animationData: {},
				index: this.current
			}
		},
		mounted() {
			let view = uni.createSelectorQuery().in(this).select(".rf-tabs");
			view.fields({
			  size: true,
			  scrollOffset: true
			}, data => {
			  this.itemWidth = data.width / this.values.length
			}).exec();
		},
		methods: {
			selTab(pI) {
				let animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.left(this.itemWidth * pI).step()
				this.animationData = animation.export()
				
				this.index = pI
				this.$emit('clickItem', pI)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rf-tabs-wrap {
		background-color: #FFFFFF;
		.rf-tabs {
			display: flex;
			.rf-tab {
				flex: 1;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 15px;
			}
			.rf-tab.active {
				font-weight: bold;
				color: #1890FF;
			}
		}
		.tab-select-bar {
			position: relative;
			height: 3px;
			border-bottom: 1px solid #2196f3;;
			.bar-line {
				position: absolute;
				left: 0;
				border-bottom: 3px solid #1890FF;
			}
		}
	}
</style>
